<template>
  <video :id="id" class="video-js vjs-big-play-centered" :autoplay="autoplay">
    <source :src="src" />
  </video>
</template>
    <script>
/* eslint-disable */

import Video from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  name: 'TestTwo',
  data() {
    return {}
  },
  mounted() {
    this.initVideo()
  },
  props: {
    id: {
      type: String,
      default: 'myVideo',
    },
    src: {
      type: String,
      default: '',
    },
    // width: {
    //   type: Number,
    //   default: 100%,
    // },
    // height: {
    //   type: Number,
    //   default: ,
    // },
    autoplay: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    initVideo() {
      //初始化视频方法
      let myPlayer = Video(this.id, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: this.autoplay,
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        // //设置视频播放器的显示宽度（以像素为单位）
        // width: this.width + 'px',
        // //设置视频播放器的显示高度（以像素为单位）
        // height: this.height + 'px',
      })
    },
  },
}
</script>




<style lang="less" scoped>
/deep/ .video-js {
  height: 100% !important;
  width: 100% !important;
}
</style>